<script setup lang="ts">
import { ref } from 'vue';
import { CaretRight } from '@element-plus/icons-vue'
import { KeyValues } from '../../../utils/types';

const props = defineProps<{ modelValue: KeyValues }>()

const cls = 'ui-api-editor-service-config-extend-settings'

const isExpand = ref(true)

const toggleShow = () => {
  isExpand.value = !isExpand.value
}
</script>

<template>
  <div :class="cls">
    <header :class="`${cls}_header`">
      <div :class="`${cls}_title`" @click="toggleShow">
        扩展设置
        <ElIcon :class="{ 'is-expand': isExpand }">
          <CaretRight />
        </ElIcon>
      </div>
    </header>
    <ElForm v-if="isExpand" inline label-width="10em" label-suffix=" :">
      <ElFormItem label="连接超时时间(秒)">
        <ElInputNumber controls-position="right" :min="0" v-model="props.modelValue.contentTimeout" />
      </ElFormItem>
      <ElFormItem label="请求超时时间(秒)">
        <ElInputNumber controls-position="right" :min="0" v-model="props.modelValue.sendTimeout" />
      </ElFormItem>
      <ElFormItem label="响应超时时间(秒)">
        <ElInputNumber controls-position="right" :min="0" v-model="props.modelValue.readTimeout" />
      </ElFormItem>
      <ElFormItem label="重试次数(次)">
        <ElInputNumber controls-position="right" :min="0" v-model="props.modelValue.retries" />
      </ElFormItem>
      <ElFormItem label="重试超时时间(秒)">
        <ElInputNumber controls-position="right" :min="0" v-model="props.modelValue.retryTimeout" />
      </ElFormItem>
    </ElForm>
  </div>
</template>

<style lang="scss">
.ui-api-editor-service-config-extend-settings {
  max-width: 870px;
  margin-bottom: 10px;
  .el-input-number {
    width: 120px;
  }
  .el-form {
    padding: 10px;
    background-color: var(--el-fill-color-light);
    &-item {
      margin-right: 10px !important;
    }
  }
  &_header {
    padding: 10px;
    border-bottom: 1px solid var(--el-border-color-light);
    font-size: 14px;
    font-weight: bold;
    color: var(--el-text-color-primary);
    .el-icon {
      margin-left: 5px;
      transition: transform .2s;
      &.is-expand {
        transform: rotate(90deg);
      }
    }
  }
  &_title {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }
}
</style>
